<template>
  <div class="Customer">
    <div class="Customer__top">
      <button class="Ecp-button-primary" style="float:right;height:25px;">搜索</button>
      <div class="Customer__form__group">
        <div class="Customer__form__label">客户名称</div>
        <div class="Customer__form__content">
          <el-input style="width:128px;" size="mini" placeholder="单行输入"></el-input>
        </div>
      </div>
      <div class="Customer__form__group" style="margin-right:8px;">
        <div class="Customer__form__label">总计消费</div>
        <div class="Customer__form__content">
          <el-input style="width:92px;" size="mini" placeholder="单行输入"></el-input>
        </div>
      </div>
      <div class="Customer__form__group">
        <div class="Customer__form__label" >到</div>
        <div class="Customer__form__content" style="margin-left:26px;">
          <el-input style="width:92px;" size="mini" placeholder="单行输入"></el-input>
        </div>
      </div>
      <div class="Customer__form__group" style="margin-right:8px;">
        <div class="Customer__form__label">查询日期</div>
        <div class="Customer__form__content">
          <el-date-picker value-format="yyyy-MM-dd" v-model="startTime" style="width:115px;" type="date" placeholder="开始日期"></el-date-picker>
        </div>
      </div>
      <div class="Customer__form__group">
        <div class="Customer__form__label" >到</div>
        <div class="Customer__form__content" style="margin-left:26px;">
          <el-date-picker value-format="yyyy-MM-dd" v-model="endTime" style="width:115px;" type="date" placeholder="选择日期"></el-date-picker>
        </div>
      </div>
    </div>
    <div style="padding: 22px 30px;background-color: #fff;">
      <p style="text-align: right;font-size:14px;line-height:16px;">{{`您查询的数据周期为${startTime}到${endTime}`}}</p>
    </div>
    <div class="Customer__table">
      <el-table
        header-row-class-name="Customer__table__header"
        row-class-name="Customer__table__row"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="shangj"
          label="商家筛选"
          :filters="[{text: '商家A', value: '商家A'},{text: '商家B', value: '商家B'},{text: '商家C', value: '商家C'}]"
          :filter-method="filterHandler">
        </el-table-column>
        <el-table-column
          prop="leimu"
          label="类目筛选"
          :filters="[{text: '类目A', value: '类目A'},{text: '类目B', value: '类目B'},{text: '类目C', value: '类目C'}]"
          :filter-method="filterHandler">
        </el-table-column>
        <el-table-column
          prop="pingp"
          label="品牌筛选"
          :filters="[{text: '品牌A', value: '品牌A'},{text: '品牌B', value: '品牌B'},{text: '品牌C', value: '品牌C'}]"
          :filter-method="filterHandler">
        </el-table-column>
        <el-table-column
          prop="shangp"
          label="商品筛选"
          :filters="[{text: '商品A', value: '商品A'},{text: '商品B', value: '商品B'},{text: '商品C', value: '商品C'}]"
          :filter-method="filterHandler">
        </el-table-column>
      </el-table>
      <div class="Customer__table__pagination">
        <el-pagination
          layout="prev, pager, next"
          :total="50">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      startTime: '2018-07-17',
      endTime: '2018-07-17',
      tableData: [
        {
          shangj: '商家A',
          leimu: '类目A',
          pingp: '品牌A',
          shangp:'商品A'
        },
        {
          shangj: '商家B',
          leimu: '类目A',
          pingp: '品牌A',
          shangp:'商品A'
        },
        {
          shangj: '商家B',
          leimu: '类目B',
          pingp: '品牌A',
          shangp:'商品A'
        },
        {
          shangj: '商家B',
          leimu: '类目B',
          pingp: '品牌c',
          shangp:'商品A'
        },
        {
          shangj: '商家A',
          leimu: '类目B',
          pingp: '品牌c',
          shangp:'商品B'
        }
      ]
    }
  },
  methods: {
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value;
    }
  },
}
</script>
<style lang="scss" scoped>
.Customer {
  padding: 20px 25px;
  background-color: #f3f3f3;
  &__table {
    background-color:#fff;
    & /deep/ {
      .Customer__table__header {
        th {
          text-align: center;
          font-size: 16px;
          color: #191919;
          padding: 20px 0;
        }
        .el-icon-arrow-down {
          font-size: 16px;
          color: #191919;
        }
      }
      .Customer__table__row {
        td {
          text-align: center;
          font-size: 16px;
          color: #191919;
          padding: 16px 0;
          border-bottom: none;
        }
      }
    }
    &__pagination {
      padding: 15px;
      text-align: center;
    }
  }
  &__top {
    padding: 22px 30px;
    background-color: #fff;
    border-bottom: 1px solid #efeeee;
  }
  &__form {
    &__label{
      float: left;
    }
    &__content {
      margin-left: 80px;
    }
    &__group{
      line-height: 26px;
      display: inline-block;
      &:not(:last-child) {
        margin-right: 22px;
      }
      & /deep/ {
        .el-date-editor {
          .el-input__inner {
            padding-left: 8px;
          }
          .el-input__prefix {
            display: none;
          }
        }
        .el-input__icon {
          line-height: 26px;
        }
        .el-input__inner, .el-input--suffix{
          height: 26px;
          line-height: 26px;
          border-radius: 9px;
          background-color: #f0f5fb;
          border: none;
          text-align: center;
        }
      }
    }
  }
}
</style>


